<template>
  <div class="songlist-container">
    <!-- 右侧展开播放列表 -->
    <el-drawer size="30%" :modal="false" :visible.sync="drawer" :direction="direction" :show-close="false"
      :modal-append-to-body="false" :withHeader="false" @closed="closedSongList" @open="openDrawer">
      <!-- 播放列表上盒子 -->
      <div class="list-top">
        <h1>当前播放</h1>
        <div class="list-info">
          <span class="count">总 {{ nowPlayList.length || 0 }} 首</span>
          <p><span><i class="el-icon-folder-add"></i>收藏全部</span><span class="clear-list"
              @click="clearPlayList">清空列表</span></p>
        </div>
      </div>
      <!-- 播放列表下盒子 @row-dblclick="getHotSong" -->
      <div class="list-bottom" v-if="nowPlayList.length > 0">
        <el-table :data="nowPlayList" style="width: 100%" lazy size="mini" :show-header="false"
          @row-dblclick="getSongUrl">
          <el-table-column width="25" align="center">
            <template slot-scope="{row}">
              <span v-if="row.id == nowId"
                :class="{ 'el-icon-caret-right': 1, 'right-icon': 1, 'active': row.id == nowId }"></span>
            </template>
          </el-table-column>
          <el-table-column width="width" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              <div class="title-tags">
                <span :class="{ 'song-title': 1, 'active': row.id == nowId }">{{ row.name }}<i
                    v-if="row.alia && row.alia.length > 0">({{
                    row.alia[0]
                    }})</i></span>
                <div class="tags">
                  <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                  <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                  <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                    @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i>
                  </el-tag>
                  <i v-if="row.pc" class="el-icon-cloudy"></i>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100" align="center" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span v-if="row.ar[0]" :class="{ 'song-arname': 1, 'active': row.id == nowId }"
                @click="$router.push('/artists/' + row.ar[0].id)">{{ row.ar[0].name }}</span>
            </template>
          </el-table-column>
          <el-table-column width="50" align="center">
            <template slot-scope="{row}">
              <p :data-title="`来源：${row.al.name || row.alia[0] || row.name}`" class="hinta"><span
                  class="el-icon-link"></span></p>
            </template>
          </el-table-column>
          <el-table-column label="label" width="60" align="center">
            <template slot-scope="{row}">
              <span class="song-time">{{ row.dt }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  props: {
    isList: {
      type: Boolean,
      default: true
    },
    nowId: {
      type: Number,
      default: 0
    },
    active: {
      type: Number,
      default: 1
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      direction: 'rtl',
      drawer: false,
      oldId: []
    }
  },
  watch: {
    isList: {
      handler(newIsList) {
        this.drawer = newIsList
      },
      immediate: true
    },
    beginId(newValue) {
      this.oldId = []
      this.oldId.push(newValue)
    }
  },
  computed: {
    ...mapState('audio', ['nowPlayList']),
    beginId() {
      return this.$store.getters['audio/firstId']
    }
  },
  methods: {
    openDrawer() {
    },
    // 关闭动画结束处理函数
    closedSongList() {
      this.$emit('updateIsList', this.drawer)
    },
    // 切换上一首歌
    changeLast() {
      if (this.active == 4) {
        this.$store.dispatch('audio/getSongUrl', this.nowPlayList.find((item) => item.id == this.oldId[this.oldId.length - 1]))
        if (this.isShow) this.$emit('getSongLyric', this.oldId[this.oldId.length - 1])
        this.oldId.pop()
        return
      }
      this.nowPlayList.some((item, index) => {
        if (item.id == this.nowId) {
          const i = index == 0 ? this.nowPlayList.length - 1 : index - 1
          this.$store.dispatch('audio/getSongUrl', this.nowPlayList[i])
          if (this.isShow) this.$emit('getSongLyric', this.nowPlayList[i].id)
          return true
        }
      })
    },
    // 切换下一首歌
    changeNext() {
      if (this.active == 4) {
        if (this.oldId[0] !== this.nowId) this.oldId.push(this.nowId)
        const i = Math.floor(Math.random() * this.nowPlayList.length)
        this.$store.dispatch('audio/getSongUrl', this.nowPlayList[i])
        if (this.isShow) this.$emit('getSongLyric', this.nowPlayList[i].id)
      } else {
        this.nowPlayList.some((item, index) => {
          if (item.id == this.nowId) {
            const i = index == this.nowPlayList.length - 1 ? 0 : index + 1
            this.$store.dispatch('audio/getSongUrl', this.nowPlayList[i])
            if (this.isShow) this.$emit('getSongLyric', this.nowPlayList[i].id)
            return true
          }
        })
      }

    },
    // 表格行双击事件
    getSongUrl(row) {
      this.$store.dispatch('audio/getSongUrl', row)
      if (this.isShow) this.$emit('getSongLyric', row.id)
    },
    // 清除播放列表按钮，清除播放列表
    clearPlayList() {
      this.$store.commit('audio/updateNowPlayList', [])
    }
  },
}
</script>

<style lang="less" scoped>
.songlist-container {
  cursor: default;

  /deep/ .el-drawer {
    background-color: rgba(255, 255, 255, 0.8);
  }

  /deep/ .el-table {
    background-color: transparent;
  }

  /deep/ .el-table__expanded-cell {
    background-color: transparent;

  }

  /deep/ .el-table tr {
    background-color: transparent;
  }

  /deep/ .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }


  /deep/ .el-drawer__wrapper {
    top: 0 !important;
    bottom: 9% !important;
    z-index: 200 !important;
  }

  /deep/ .el-drawer__body {
    padding: 0 10px;
  }

  .list-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    box-sizing: border-box;
    width: 100%;
    height: 15%;
    padding: 10px 20px;
    // border-bottom: 1px solid rgb(233, 233, 233);
    // background-color: skyblue;

    h1 {
      margin: 0;
      font-weight: 550;
      font-size: 20px;
    }

    .list-info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .count {
        font-size: 14px;
        color: rgb(224, 125, 32);
      }

      p {
        display: flex;
        align-items: center;
        justify-content: end;
        width: 50%;

        span {
          cursor: pointer;
          font-size: 14px;
          white-space: nowrap;
          margin-left: 10px;

          i {
            font-size: 20px;
            transform: translateY(1.5px);
            margin-right: 3px;
          }
        }

        .clear-list {
          color: rgb(218, 43, 31);

          &:hover {
            color: rgb(255, 30, 0);

          }
        }
      }
    }
  }

  .list-bottom {
    width: 100%;
    height: 85%;
    overflow: auto;

    .title-tags {
      display: flex;

      .tags {
        display: flex;
        align-items: center;

        .vip-tag {
          color: #d83b55;
          border: 1px solid #d83b55;
          margin-left: 3px;
        }

        .sq-tag {
          color: #962ed6;
          border: 1px solid #962ed6;
          margin-left: 3px;
        }

        /deep/ .el-icon-cloudy {
          font-size: 20px;
          // transform: translateY(4px);
          margin-left: 3px;
        }
      }


    }

    .song-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &.active {
        color: rgb(112, 54, 194);
      }

      i {
        color: #9e9d9d;
        font-style: normal;
      }
    }

    .song-arname {
      display: block;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: rgb(114, 114, 114);

      &.active {
        color: rgb(112, 54, 194);
      }
    }

    .hinta {
      position: relative;
      margin: 0;

      &:hover:before {
        z-index: 100;
        position: absolute;
        top: 20px;
        left: 7px;
        height: 16px;
        content: attr(data-title);
        color: #525252;
        font-size: 12px;
        line-height: 16px;
        padding: 2px 4px;
        border: 1px solid rgb(112, 112, 112);
        background-color: #fff;
        border-radius: 4px;
        text-align: start;
        white-space: nowrap;
      }

      .el-icon-link {
        font-size: 18px;
        color: rgb(168, 168, 168);

        &:hover {
          color: rgb(0, 0, 0);
        }
      }
    }

    .song-time {
      font-size: 14px;
      color: rgb(71, 134, 207);
    }

    .right-icon {
      font-size: 16px;

      &.active {
        color: rgb(112, 54, 194);
      }
    }
  }

  /deep/ .el-table__row {
    &:hover .song-time,
    &:hover .el-icon-link,
    &:hover .song-arname {
      color: #000;
    }
  }

  /deep/ .el-table .cell {
    overflow: visible;
    word-break: normal;
    padding-left: 3px;
    padding-right: 3px;
  }

  /deep/ .el-tabs__item:hover {
    color: #962ed6;
  }

  /deep/ .el-tabs__item.is-active {
    color: #962ed6;
    font-size: 20px;
    font-weight: 700;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #962ed6;
    height: 4px;
  }

  /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }

  /deep/ .el-tag--mini {
    height: 16px;
    line-height: 16px;
    padding: 0 2px;
  }

  /deep/ .el-table--mini {
    font-size: 14px;
  }
}
</style>

